<template>
    <el-breadcrumb
      separator="/"
      class="mb-2 mt-1"
      style="vertical-align: bottom"
    >
      <el-breadcrumb-item>
        <div class="flex align-center">
          <el-icon :size="18"><Setting /></el-icon>
          <span class="pl">设定</span>
        </div>
      </el-breadcrumb-item>
      <el-breadcrumb-item>账号设定</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-scrollbar class="scroll">
        <el-form
          ref="ruleFormRef"
          style="max-width: 650px"
          :model="ruleForm"
          :rules="rules"
          label-width="200"
          class="form mt-1"
          status-icon
        >
          <el-form-item label="币种" prop="currency">
            <el-select
              style="width: 100%"
              v-model="ruleForm.currency"
              placeholder="请选择"
            >
              <el-option
                v-for="item in filter.currency"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="區域" prop="area">
            <el-select
              style="width: 100%"
              v-model="ruleForm.area"
              placeholder="请选择"
            >
              <el-option
                v-for="item in filter.area"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="FB主页" prop="fbpage">
            <el-select
              style="width: 100%"
              v-model="ruleForm.fbpage"
              placeholder="请选择"
            >
              <el-option
                v-for="item in filter.fbpage"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户头像" prop="ent_name">
            <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip">
                  企业LOGO，将会显示在活动等页面(尺寸：80*80或等比例放大,小于500KB)
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="企业名称" prop="ent_name">
            <el-input v-model="ruleForm.ent_name" />
          </el-form-item>
          <el-form-item label="企业注册码" prop="ent_code">
            <el-input v-model="ruleForm.ent_code" />
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="ruleForm.contact" />
          </el-form-item>
          <el-form-item label="Email" prop="email">
            <el-input v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="公司地址" prop="address">
            <el-input v-model="ruleForm.address" type="textarea" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <el-form-item label-width="200" style="margin-bottom: 0">
          <el-button
            size="large"
            type="primary"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </el-form-item>
      </template>
    </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { $getCurrency, $getArea, $getFBpage } from "@api/setting";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
const filter = ref({
  currency: [],
  area: [],
  fbpage: [],
});
onMounted(() => {
  getFilter();
});

interface RuleForm {
  currency: string;
  area: string;
  fbpage: string;
  avatar:string;
  ent_name: string;
  ent_code: string;
  contact: string;
  email: string;
  phone: boolean;
  address: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  currency: "",
  area: "",
  fbpage: "",
  avatar:"",
  ent_name: "",
  ent_code: "",
  contact: "",
  email: "",
  phone: "",
  address: "",
});

const rules = reactive<FormRules<RuleForm>>({
  currency: [
    {
      required: true,
      message: "Please select currencye",
      trigger: "change",
    },
  ],
  area: [
    {
      required: true,
      message: "Please select currencye",
      trigger: "change",
    },
  ],
  fbpage: [
    {
      required: true,
      message: "Please select fbpage",
      trigger: "change",
    },
  ],
  ent_name: [
    { required: true, message: "Please input ent_name", trigger: "blur" },
  ],
  ent_code: [
    { required: true, message: "Please input ent_code", trigger: "blur" },
  ],
  contact: [
    { required: true, message: "Please input contact", trigger: "blur" },
  ],
  email: [{ required: true, message: "Please input contact", trigger: "blur" }],
  phone: [{ required: true, message: "Please input phone", trigger: "blur" }],
  address: [
    { required: true, message: "Please input address", trigger: "blur" },
  ]
});
const getFilter = async () => {
  const currency_res = await $getCurrency();
  const area_res = await $getArea();
  const fbpage_res = await $getFBpage();
  filter.value.currency = currency_res.data.list;
  filter.value.area = area_res.data.list;
  filter.value.fbpage = fbpage_res.data.list;
  //初始化默认值
  // ruleForm.currency = currency_res.data.list[0].id;
  // ruleForm.area = area_res.data.list[0].id;
  // ruleForm.fbpage = fbpage_res.data.list[0].id;
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

</script>

<style lang="scss">
.avatar-uploader {
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 320px);
}
</style>
